import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AlertModule } from './alert.module';

@Component({
  template: `
    <lv-alert [lvClosable]="closable"><h2>Default Text</h2></lv-alert>
    <lv-alert [lvShowIcon]="showIcon" lvType="info"><h2>Info Text</h2></lv-alert>
    <lv-alert lvType="success"><h2>Success Text</h2></lv-alert>
    <lv-alert lvType="warning"><h2>Warning Text</h2></lv-alert>
    <lv-alert lvType="error"><h2>Error Text</h2></lv-alert>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestAlertComponent {
  closable = true;
  showIcon = true;
}

describe('AlertComponent', () => {
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [TestAlertComponent],
        imports: [AlertModule, NoopAnimationsModule],
        teardown: { destroyAfterEach: true },
      }).compileComponents();
    })
  );

  describe('render', () => {
    let component: TestAlertComponent;
    let fixture: ComponentFixture<TestAlertComponent>;
    const renderComp = fakeAsync(para => {
      for (const [key, value] of Object.entries(para)) {
        component[key] = value;
      }
      fixture.detectChanges();
      tick(1500);
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
    });

    beforeEach(() => {
      fixture = TestBed.createComponent(TestAlertComponent);
      component = fixture.componentInstance;
    });

    it('with lvClosable is false', () => {
      renderComp({ closable: false });
    });

    it('with lvShowIcon is false', () => {
      renderComp({ showIcon: false });
    });
  });

  describe('work', () => {
    let fixture: ComponentFixture<TestAlertComponent>;

    beforeEach(fakeAsync(() => {
      fixture = TestBed.createComponent(TestAlertComponent);
      fixture.detectChanges();
      tick(500);
    }));

    it('should work when close', fakeAsync(() => {
      const firstAlert = fixture.nativeElement.querySelector('lv-alert');
      expect(firstAlert.style._values.display).not.toContain('none');

      const closeBtn = fixture.nativeElement.querySelector('.lv-alert-btn-close');
      closeBtn.dispatchEvent(new Event('click'));
      tick(500);
      fixture.detectChanges();
      tick(500);
      fixture.detectChanges();

      expect(firstAlert.style._values.display).toContain('none');
    }));
  });
});
